<template>
    <div style="width:100%;height:60%">
        <span class="explain">请在下拉框中快捷选择气象或拖拽滑动条选择气象组合</span>
        <!-- <a-select
            v-model:value="selectedWeather"
            style="margin-left: 20px;width: 18%"
            placeholder="请选择异常天气"
            @change="selectedWeatherChange"
        >
            <a-select-option key="normal" value="normal">正常</a-select-option>
            <a-select-option key="big_wind" value="big_wind">大风</a-select-option>
            <a-select-option key="blizzard" value="blizzard">暴雪</a-select-option>
            <a-select-option key="frozen_road" value="frozen_road">路面结冰</a-select-option>
            <a-select-option key="high_temperature" value="high_temperature">高温</a-select-option>
            <a-select-option key="rain" value="rain">降水</a-select-option>
            <a-select-option key="typhoon" value="typhoon">台风</a-select-option>
        </a-select> -->
            <!-- :display-render="displayRender" -->
            <!-- expand-trigger="hover" -->
        <!-- <a-cascader
            v-model:value="selectedWeather"
            :options="options"
            placeholder="请选择异常天气"
            style="margin-left: 20px;width: 18%"
        /> -->
        <!-- <el-cascader
            v-model="selectedWeather"
            :options="options"
            style="margin-left: 20px;width: 18%"
            @change="selectedWeatherChange"
            @click=" console.log(123) "
        /> -->
        <a-cascader 
            :options="options" 
            placeholder="非重大天气" 
            @change="selectedWeatherChange"
            style="margin-left: 20px;width: 18%"
        />
        <wg-graph v-if="update" :weather_graph_data="historyGraph"/>
        <!-- </div> -->
        <div style="margin-top:3%;width:98%;">
            <!-- <el-form ref="form" :model="form" label-width="60px" size="mini">
                <el-form-item label="温度" class="item_label">
                    <el-slider
                        v-model="form.temperature"
                        :min="-50"
                        :max="55"
                        :marks="temperatureMarks"
                        :format-tooltip="temperatureFormatTooltip"
                    >
                    </el-slider>
                </el-form-item>
                <el-form-item label="降水" class="item_label">
                    <el-slider
                        v-model="form.rain"
                        :max="165"
                        :marks="rainMarks"
                        :format-tooltip="rainFormatTooltip"
                    >
                    </el-slider>
                </el-form-item>
                <el-form-item label="风力" class="item_label">
                    <el-slider
                        v-model="form.wind"
                        :max="65"
                        :marks="windMarks"
                        :format-tooltip="windFormatTooltip"
                    >
                    </el-slider>
                </el-form-item>
            </el-form> -->
            <el-form ref="form" :model="form" label-width="60px" size="mini">
                <el-form-item label="风力" class="item_label">
                    <el-slider
                        v-model="form.wind"
                        :max="9"
                        show-stops
                        :format-tooltip="windFormatTooltip"
                        @change="handleChange"
                        :disabled="selectedWeather !== 'normal'"
                    >
                    </el-slider>
                </el-form-item>
                <el-form-item label="降水" class="item_label">
                    <el-slider
                        v-model="form.rain"
                        :max="6"
                        show-stops
                        :format-tooltip="rainFormatTooltip"
                        @change="handleChange"
                        :disabled="selectedWeather !== 'normal'"
                    >
                    </el-slider>
                </el-form-item>
                <el-form-item label="温度" class="item_label">
                    <el-slider
                        v-model="form.temperature"
                        :max="8"
                        show-stops
                        :format-tooltip="temperatureFormatTooltip"
                        @change="handleChange"
                        :disabled="selectedWeather !== 'normal'"
                    >
                    </el-slider>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import useResize from "@/componentApi/useResize.js";
import wgGraph from './WgGraph.vue';
var historyGraphJSON = require('@/assets/history/xuhui/history003.json')
var historyNumSet = require('@/assets/historyNum.json')
const regionMap = {
    '徐汇': 'xuhui',
    '浦东': 'pudong',
}
export default {
    name: 'history',
    components: {
        wgGraph,
    },
    data() {
        return {
            // region: this.$store.state.region,
            selectedWeather: 'normal',
            update: true,
            form: {
                wind: 0,
                rain: 0,
                temperature: 3,
            },
            temperatureMarks: {
                "-40": {style: {color: 'rgb(179, 239, 255)'},label: '极寒',},
                "-20": {style: {color: 'rgb(179, 239, 255)'},label: '酷寒',},
                "-10": {style: {color: 'rgb(179, 239, 255)'},label: '严寒',},
                "0": {style: {color: 'rgb(179, 239, 255)'},label: '小寒',},
                "10": {style: {color: 'rgb(179, 239, 255)'},label: '凉',},
                "20": {style: {color: 'rgb(179, 239, 255)'},label: '温凉',},
                "30": {style: {color: 'rgb(179, 239, 255)'},label: '温和',},
                "40": {style: {color: 'rgb(179, 239, 255)'},label: '极热',},
                "50": {style: {color: 'rgb(179, 239, 255)'},label: '奇热',},
            },
            windMarks: {
                "1.5": {style: {color: 'rgb(179, 239, 255)'},label: '0-1级',},
                "5.4": {style: {color: 'rgb(179, 239, 255)'},label: '2-3级',},
                "10.8": {style: {color: 'rgb(179, 239, 255)'},label: '4-5级',},
                "17.1": {style: {color: 'rgb(179, 239, 255)'},label: '6-7级',},
                "24.2": {style: {color: 'rgb(179, 239, 255)'},label: '8-9级',},
                "32.6": {style: {color: 'rgb(179, 239, 255)'},label: '10-11级',},
                "41.4": {style: {color: 'rgb(179, 239, 255)'},label: '12-13级',},
                "50.9": {style: {color: 'rgb(179, 239, 255)'},label: '14-15级',},
                "56": {style: {color: 'rgb(179, 239, 255)'},label: '16-17级',},
                "60": {style: {color: 'rgb(179, 239, 255)'},label: '17级以上',},
            },
            rainMarks: {
                "0.1": {style: {color: 'rgb(179, 239, 255)'},label: '微量降雨',},
                "4.9": {style: {color: 'rgb(179, 239, 255)'},label: '小雨',},
                "14.9": {style: {color: 'rgb(179, 239, 255)'},label: '中雨',},
                "29.9": {style: {color: 'rgb(179, 239, 255)'},label: '大雨',},
                "69.9": {style: {color: 'rgb(179, 239, 255)'},label: '暴雨',},
                "139.9": {style: {color: 'rgb(179, 239, 255)'},label: '大暴雨',},
                "150": {style: {color: 'rgb(179, 239, 255)'},label: '特大暴雨',},
            },
            historyGraph: historyGraphJSON,
            options: [
                {
                    value: 'normal',
                    label: '非重大天气',
                    children: null,
                },
                {
                    value: 'big_wind',
                    label: '大风',
                    children: [
                        {value: 'big_wind1',label: '需预防事件',},
                        {value: 'big_wind2',label: '持续性影响事件',},
                        {value: 'big_wind3',label: '强关联事件',},
                        {value: 'big_wind4',label: '高频发事件',}
                    ],
                },
                {
                    value: 'blizzard',
                    label: '暴雪',
                    children: [
                        {value: 'blizzard1',label: '需预防事件',},
                        {value: 'blizzard2',label: '持续性影响事件',},
                        {value: 'blizzard3',label: '强关联事件',},
                        {value: 'blizzard4',label: '高频发事件',}
                    ],
                },
                {
                    value: 'frozen_road',
                    label: '路面结冰',
                    children: [
                        {value: 'frozen_road1',label: '需预防事件',},
                        {value: 'frozen_road2',label: '持续性影响事件',},
                        {value: 'frozen_road3',label: '强关联事件',},
                        {value: 'frozen_road4',label: '高频发事件',}
                    ],
                },
                {
                    value: 'high_temperature',
                    label: '高温',
                    children: [
                        {value: 'high_temperature1',label: '需预防事件',},
                        {value: 'high_temperature2',label: '持续性影响事件',},
                        {value: 'high_temperature3',label: '强关联事件',},
                        {value: 'high_temperature4',label: '高频发事件',}
                    ],
                },
                {
                    value: 'rain',
                    label: '暴雨',
                    children: [
                        {value: 'rain1',label: '需预防事件',},
                        {value: 'rain2',label: '持续性影响事件',},
                        {value: 'rain3',label: '强关联事件',},
                        {value: 'rain4',label: '高频发事件',}
                    ],
                },
                {
                    value: 'typhoon',
                    label: '台风',
                    children: [
                        {value: 'typhoon1',label: '需预防事件',},
                        {value: 'typhoon2',label: '持续性影响事件',},
                        {value: 'typhoon3',label: '强关联事件',},
                        {value: 'typhoon4',label: '高频发事件',}
                    ],
                }
            ]
        }
    },
    created() {
        let { getRegion } = useResize();
        // this.region = getRegion();
    },
    computed: {
        region() {
            // let tempRegion = this.region === '浦东' ? 'pudong' : 'xuhui'
            // this.historyGraph = require(`@/assets/history/${tempRegion}/history003.json`)
            // this.reload();
            return this.$store.state.region
        },
    },
    watch: {
        region(newVal, oldVal) {
            let tempRegion = this.region === '浦东' ? 'pudong' : 'xuhui'
            this.historyGraph = require(`@/assets/history/${tempRegion}/history003.json`)
            this.reload();
        }
    },
    methods: {
        selectedWeatherChange(value) {
            value = value[value.length - 1]
            this.selectedWeather = value;
            if (value === 'normal') {
                let tempRegion = this.region === '浦东' ? 'pudong' : 'xuhui'
                this.historyGraph = require(`@/assets/history/${tempRegion}/history003.json`)
            } else {
                this.historyGraph = require(`@/assets/abnormalWeather/${value}.json`)
            }
            this.reload();
        },
        reload() {
            this.update = false;
            this.$nextTick( () => {
                this.update = true;
            })
        },
        handleChange() {
            var queryNum = `${this.form.wind}${this.form.rain}${this.form.temperature}`
            let tempRegion = this.region === '浦东' ? 'pudong' : 'xuhui'
            if (historyNumSet.numSet.indexOf(queryNum) >= 0) {
                // this.selectedWeather = null
                this.historyGraph = require(`@/assets/history/${tempRegion}/history003.json`)
            } else {
                this.$message.info({
                    content: "该条件下事件不存在",
                    duration: 1
                })
            }
            this.reload();
        },
        temperatureFormatTooltip(value) {
            var res = "";
            switch (value) {
                case 0:
                    res = "极寒"
                    break;
                case 1:
                    res = "酷寒"
                    break;
                case 2:
                    res = "严寒"
                    break;
                case 3:
                    res = "小寒"
                    break;
                case 4:
                    res = "凉"
                    break;
                case 5:
                    res = "温凉"
                    break;
                case 6:
                    res = "温和"
                    break;
                case 7:
                    res = "极热"
                    break;
                case 8:
                    res = "奇热"
                    break;
                default:
                    break;
            }
            return res
        },
        windFormatTooltip(value) {
            var res = "";
            switch (value) {
                case 0:
                    res = "0-1级风"
                    break;
                case 1:
                    res = "2-3级风"
                    break;
                case 2:
                    res = "4-5级风"
                    break;
                case 3:
                    res = "6-7级风"
                    break;
                case 4:
                    res = "8-9级风"
                    break;
                case 5:
                    res = "10-11级风"
                    break;
                case 6:
                    res = "12-13级风"
                    break;
                case 7:
                    res = "14-15级风"
                    break;
                case 8:
                    res = "16-17级风"
                    break;
                case 9:
                    res = "17级风以上"
                    break;                                        
                default:
                    break;
            }
            return res
        },
        rainFormatTooltip(value) {
            var res = "";
            switch (value) {
                case 0:
                    res = "微量降雨"
                    break;
                case 1:
                    res = "小雨"
                    break;
                case 2:
                    res = "中雨"
                    break;
                case 3:
                    res = "大雨"
                    break;
                case 4:
                    res = "暴雨"
                    break;
                case 5:
                    res = "大暴雨"
                    break;
                case 6:
                    res = "特大暴雨"
                    break;
                default:
                    break;
            }
            return res
        }
    },
}
</script>

<style lang="scss">
    .explain {
        margin-left: 20px;
        color: rgb(179, 239, 255);
        font-size: 16px;
        // font-weight: bold;
    }
    .title {
        display: flex;
        justify-content: center;
        padding-top: 1.5%;
        color: rgb(179, 239, 255);
        font-size: 16;
        font-weight: bold;
    }
    .item_label .el-form-item__label{
        color: rgb(179, 239, 255);
        font-size: 16;
        font-weight: bold;
    }
</style>